<script setup lang="ts">
import { reportApi } from "@/api/report-api";
import type { ReportDetailVO } from "@/api/types/report";
import Jiankang from "@/components/jiankang/index.vue";
import VRangeIndicator from "@/views/components/v-range-indicator.vue";
import { ArrowLeft, Edit, Picture } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { computed, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import HealthLabel from "./components/healthLabel/index.vue";
import RiskAssessment from "./components/riskAssessment/index.vue";
import Imgs from "./components/imgs.vue";

defineOptions({
  name: "ReportDetails"
});

const router = useRouter();
const route = useRoute();

// 报告数据
const reportDetail = ref<ReportDetailVO>({});
const loading = ref(false);
const activeTab = ref("report");
const showRiskDrawer = ref(false);
const showHealthDrawer = ref(false);
const dialogVisible = ref(false);
const dialogVisibleActiveTab = ref("report");
const addJKDrawerRef = ref();
const tabsFrom = ref({
  riskAssessmentRejectReason: "",
  healthSuggestionRejectReason: ""
});
const seletedStatus = ref();
// 报告总结展开收起状态
const isReportSummaryExpanded = ref(false);

// 计算属性
const reportTitle = computed(() => {
  if (reportDetail.value.userName) {
    const riskLevel =
      reportDetail.value.healthTags?.find(tag => tag.tagName)?.tagName || "";
    return `${reportDetail.value.userName}${riskLevel ? `（${riskLevel}）` : ""}`;
  }
  return "";
});

const inspectionDate = computed(() => {
  return reportDetail.value.inspectionDate || "";
});

const institution = computed(() => {
  return reportDetail.value.institution || "";
});

// 异常指标数据
const abnormalItems = computed(() => {
  return reportDetail.value.abnormalItems || [];
});

// 所有指标数据（完整报告）
const allItems = computed(() => {
  return reportDetail.value.allItems || [];
});

// 健康建议内容
const healthSuggestionContent = computed(() => {
  const suggestions = reportDetail.value.healthSuggestions || [];
  return suggestions.length > 0 ? suggestions[0].content : "";
});

// 异常指标数量
const abnormalCount = computed(() => {
  return abnormalItems.value.reduce((count, category) => {
    return (
      count +
      (category.itemList?.filter(item => item.abnormalStatus !== 0).length || 0)
    );
  }, 0);
});

const goBack = () => {
  router.back();
};

// 切换报告总结展开收起状态
const toggleReportSummary = () => {
  console.log("切换报告总结展开状态:", !isReportSummaryExpanded.value);
  isReportSummaryExpanded.value = !isReportSummaryExpanded.value;
};

const handleEdit = (type: string) => {
  if (type === "risk") {
    showRiskDrawer.value = true;
  } else if (type === "suggestion") {
    showHealthDrawer.value = true;
  } else {
    // showHealthDrawer.value = true;
    addJKDrawerRef.value?.open(reportDetail.value.reportId);
  }
};

const handleRiskAssessmentSubmit = () => {
  fetchReportDetail();
};

const handleHealthSubmit = () => {
  fetchReportDetail();
};

const onJKSave = () => {
  fetchReportDetail();
};

// 获取报告详情数据
const fetchReportDetail = async () => {
  const reportId = route.params.reportId || route.query.reportId;

  if (!reportId) {
    ElMessage.error("缺少报告ID参数");
    return;
  }

  loading.value = true;
  try {
    const response = await reportApi.queryReportDetail({
      reportId: String(reportId),
      reportType: activeTab.value === "report" ? 1 : 2
    });

    if (response.code == 0) {
      reportDetail.value = response.data || {};
    } else {
      ElMessage.error(response.message || "获取报告详情失败");
    }
  } catch (error) {
    console.error("获取报告详情失败:", error);
    ElMessage.error("获取报告详情失败");
  } finally {
    loading.value = false;
  }
};

// 计算指标值在图表中的位置
const getMarkerPosition = (
  value: string,
  unitMin?: string,
  unitMax?: string
) => {
  if (!unitMin || !unitMax) return 50;

  const numValue = parseFloat(value);
  const min = parseFloat(unitMin);
  const max = parseFloat(unitMax);

  if (isNaN(numValue) || isNaN(min) || isNaN(max)) return 50;

  const totalRange = max - min;
  const extendedMin = min - totalRange * 0.5;
  const extendedMax = max + totalRange * 0.5;
  const extendedRange = extendedMax - extendedMin;

  const position = ((numValue - extendedMin) / extendedRange) * 100;
  return Math.max(0, Math.min(100, position));
};

// 获取异常状态样式类
const getAbnormalStatusClass = (status?: number) => {
  switch (status) {
    case 1: // 偏高
    case 3: // 异常
      return "text-red-500";
    case 2: // 偏低
      return "text-blue-500";
    default: // 正常
      return "text-green-500";
  }
};

// 获取异常状态箭头
const getAbnormalStatusArrow = (status?: number) => {
  switch (status) {
    case 1: // 偏高
      return "↑";
    case 2: // 偏低
      return "↓";
    case 3: // 异常
      return "!";
    default:
      return "";
  }
};

/**
 * 根据指标的最大正常值计算范围指示器的最大显示值
 * 这个函数用于动态调整v-range-indicator组件的显示范围，确保指标值能够合适地显示在图表中
 *
 * @param unitMax 指标的最大正常值(字符串格式)
 * @returns 计算后的最大显示值
 *
 * 计算规则：
 * - unitMax <= 100: 返回 100 (适用于百分比类指标)
 * - 100 < unitMax < 500: 返回 500 (适用于中等数值范围指标)
 * - unitMax >= 500: 返回 1000 (适用于大数值范围指标)
 */
const calculateMaxDisplayValue = (unitMax?: string) => {
  // 日志记录：开始计算最大显示值
  console.log(`[计算最大显示值] 输入参数 unitMax: ${unitMax}`);

  // 参数验证：如果unitMax为空或无效，默认返回100
  if (!unitMax || isNaN(parseFloat(unitMax))) {
    console.warn(`[计算最大显示值] unitMax无效，使用默认值100`);
    return 100;
  }

  const maxValue = parseFloat(unitMax);
  let result: number;

  // 根据unitMax的数值范围确定最大显示值
  if (maxValue <= 100) {
    result = 100;
  } else if (maxValue < 500) {
    result = 800;
  } else {
    result = 1000;
  }

  // 日志记录：计算完成
  console.log(`[计算最大显示值] 最终计算结果: ${result}`);

  return result;
};

// 是否显示审核按钮组
const showReviewButtons = computed(() => {
  const status = reportDetail.value.status;
  // return status !== 4 && status !== 5;
  return (
    reportDetail.value.showHealthSuggestionReviewButton ||
    reportDetail.value.showRiskAssessmentReviewButton
  );
});

// 审核操作
const reviewLoading = ref(false);
const rejectLoading = ref(false);

const handleReview = async (status: number) => {
  const reportId = reportDetail.value.reportId;
  if (!reportId) {
    ElMessage.error("报告ID不存在");
    return;
  }
  seletedStatus.value = status;

  if (status === 1) {
    rejectLoading.value = true;
  } else {
    reviewLoading.value = true;
  }

  dialogVisible.value = true;
};

const handleDialogClose = () => {
  reviewLoading.value = false;
  rejectLoading.value = false;
  dialogVisible.value = false;
  seletedStatus.value = undefined;
};

const handleSuggestionSubmit = async () => {
  const reportId = reportDetail.value.reportId;
  const status = seletedStatus.value;

  try {
    const response = await reportApi.postReportReview({
      reportId,
      riskAssessmentStatus: status,
      healthSuggestionStatus: status,
      ...tabsFrom.value
    });

    if (response.code === 0) {
      ElMessage.success(status === 1 ? "驳回成功" : "审核通过");
      // 重新获取报告详情
      await fetchReportDetail();
    } else {
      ElMessage.error(response.message || "操作失败");
    }
  } catch (error) {
    console.error("审核操作失败:", error);
    ElMessage.error("操作失败");
  } finally {
    reviewLoading.value = false;
    rejectLoading.value = false;
    dialogVisible.value = false;
  }
};

// 监听 tab 切换，重新获取数据
watch(activeTab, (newTab, oldTab) => {
  if (newTab !== oldTab) {
    fetchReportDetail();
  }
});
// 添加获取建议类型名称的方法
const getSuggestionTypeName = (type: number) => {
  switch (type) {
    case 2:
      return "饮食运动建议";
    case 3:
      return "生活习惯建议";
    default:
      return "健康建议";
  }
};

const currentImages = ref([]);
const imagingModalVisible = ref(false);

const handleViewImage = (item: any) => {
  console.log(item);
  console.log("item.images", item.images);
  currentImages.value = item.images;
  imagingModalVisible.value = true;
};

onMounted(() => {
  fetchReportDetail();
});

// !! activeTab改变的时候重新调用接口
</script>

<template>
  <div
    v-loading="loading"
    class="min-h-screen max-w-3/4 common-page"
    :class="{ 'pb-20': showReviewButtons }"
  >
    <!-- 头部导航 -->
    <div class="bg-white sticky top-0 z-10">
      <div class="flex items-center py-3">
        <el-button :icon="ArrowLeft" text class="!p-2 mr-2" @click="goBack" />
        <span class="text-lg font-medium">报告详情</span>
      </div>
    </div>

    <!-- 标签页 -->
    <el-tabs v-model="activeTab" class="bg-white px-4">
      <el-tab-pane label="报告解读" name="report" />
      <el-tab-pane label="完整报告" name="complete" />
    </el-tabs>

    <!-- 报告信息卡片 -->
    <div v-if="reportTitle" class="mx-4">
      <div class="!border-blue-400 border p-1 !bg-blue-100 min-w-full">
        <div class="text-gray-600 text-sm flex justify-between max-w-3/4">
          <span>{{ reportTitle }}</span>
          <div v-if="inspectionDate">受检体检时间：{{ inspectionDate }}</div>
          <div v-if="institution">检查机构：{{ institution }}</div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div v-if="activeTab === 'report'" class="px-4 pb-5 space-y-4 mt-4">
      <!-- 风险评估 -->
      <div>
        <div class="flex items-center justify-between my-2">
          <div class="flex items-center">
            <div class="w-1 h-5 bg-blue-400 rounded-2xl mr-4" />
            <span class="font-medium">风险评估</span>
          </div>
          <div>
            <span
              v-if="!reportDetail.riskAssessmentEditable"
              class="text-gray-400 text-xs ml-3"
            >
              <!-- 操作者信息 -->
              操作者：{{ reportDetail.riskAssessmentOperator }}
              <el-tag>
                {{ reportDetail.riskAssessmentStatusName }}
              </el-tag>
            </span>
            <el-button
              v-else
              :icon="Edit"
              text
              type="primary"
              @click="handleEdit('risk')"
            >
              编辑
            </el-button>
          </div>
        </div>

        <el-row v-if="reportDetail.riskAssessments?.length" :gutter="20">
          <el-col
            v-for="e in reportDetail.riskAssessments"
            :key="e.assessmentId"
            :span="6"
            class="my-2"
          >
            <div class="bg-[#FFF2F4] p-2 rounded-sm">
              <div class="font-bold my-1.5">{{ e.title }}</div>
              <div class="text-nowrap overflow-hidden text-ellipsis">
                {{ e.content }}
              </div>
            </div>
          </el-col>
        </el-row>
        <p
          v-else
          class="text-gray-500 m-0 whitespace-pre-wrap bg-gray-50 px-6 py-4 leading-loose"
        >
          暂无，请根据用户的检查结果填写风险评估
        </p>

        <!-- 驳回原因 -->
        <div
          v-if="reportDetail.riskAssessmentRejectReason"
          class="mt-3 p-3 bg-red-50 border border-red-200 rounded text-red-600 text-sm"
        >
          <strong>驳回原因：</strong
          >{{ reportDetail.riskAssessmentRejectReason }}
        </div>
      </div>

      <!-- 健康建议 -->
      <div>
        <div class="flex items-center justify-between my-2">
          <div class="flex items-center">
            <div class="w-1 h-5 bg-blue-400 rounded-2xl mr-4" />
            <span class="font-medium">健康建议</span>
          </div>
          <div>
            <span
              v-if="!reportDetail.healthSuggestionEditable"
              class="text-gray-400 text-xs ml-3"
            >
              <!-- 操作者信息 -->
              操作者：{{ reportDetail.healthSuggestionOperator }}
              <el-tag>
                {{ reportDetail.healthSuggestionStatusName }}
              </el-tag>
            </span>
            <el-button
              v-else
              :icon="Edit"
              text
              type="primary"
              @click="handleEdit('health')"
            >
              编辑
            </el-button>
          </div>
        </div>

        <div
          v-if="reportDetail.healthSuggestions?.length > 0"
          class="space-y-4"
        >
          <div
            v-for="(suggestion, index) in reportDetail.healthSuggestions"
            :key="index"
            class="bg-gray-50 px-6 py-4 rounded-lg"
          >
            <!-- 建议类型标题 -->
            <div class="flex items-center mb-3">
              <div class="w-1 h-4 bg-green-400 rounded-full mr-2" />
              <span class="font-medium text-sm text-gray-700">
                {{ getSuggestionTypeName(suggestion.type) }}
              </span>
            </div>

            <!-- 建议内容 -->
            <div class="whitespace-pre-wrap leading-loose text-gray-800">
              {{ suggestion.content }}
            </div>
          </div>
        </div>
        <p
          v-else
          class="text-gray-500 m-0 whitespace-pre-wrap bg-gray-50 px-6 py-4 leading-loose"
        >
          暂无，请根据用户的检查结果填写健康建议
        </p>

        <!-- 驳回原因 -->
        <div
          v-if="reportDetail.healthSuggestionRejectReason"
          class="mt-3 p-3 bg-red-50 border border-red-200 rounded text-red-600 text-sm"
        >
          <strong>驳回原因：</strong
          >{{ reportDetail.healthSuggestionRejectReason }}
        </div>
      </div>

      <!-- 健康标签 -->
      <!-- <div v-if="reportDetail.healthTags && reportDetail.healthTags.length > 0"> -->
      <div>
        <div class="flex items-center justify-between my-2">
          <div class="flex items-center">
            <div class="w-1 h-5 bg-blue-400 rounded-2xl mr-4" />
            <span class="font-medium">健康标签</span>
            <span class="text-gray-600 text-xs ml-4"
              >注：该数据不对用户侧展示</span
            >
          </div>
          <div>
            <el-button
              :icon="Edit"
              text
              type="primary"
              @click="handleEdit('suggestion')"
            >
              编辑
            </el-button>
          </div>
        </div>

        <div
          v-if="reportDetail.healthTags?.length > 0"
          class="flex flex-wrap gap-2 bg-gray-50 p-3.5"
        >
          <el-tag
            v-for="tag in reportDetail.healthTags"
            :key="tag.tagId"
            effect="plain"
            round
          >
            {{ tag.tagName }}
          </el-tag>
        </div>

        <p
          v-else
          class="text-gray-500 m-0 whitespace-pre-wrap bg-gray-50 px-6 py-4 leading-loose"
        >
          暂无，请跟根据用户检查结果给予健康标签
        </p>
      </div>

      <!-- 异常指标记录 -->
      <div v-if="abnormalItems.length > 0">
        <div class="flex items-center justify-between my-2 mt-5 mb-5">
          <div class="flex items-center">
            <div class="w-1 h-5 bg-blue-400 rounded-2xl mr-4" />
            <span class="font-medium">异常指标记录</span>
            <el-tag size="small" type="danger" class="ml-2">
              {{ abnormalCount }}项异常
            </el-tag>
          </div>
        </div>

        <!-- 按分类显示异常指标 - 报告解读页面默认展开不可折叠 -->
        <div class="bg-gray-50 px-6 py-4">
          <div
            v-for="category in abnormalItems"
            :key="category.categoryId"
            class="mb-6"
          >
            <!-- 分类标题 -->
            <div class="flex items-center mb-4">
              <span class="font-medium text-base">{{
                category.categoryName
              }}</span>
              <el-tag size="small" type="danger" class="ml-2">
                {{
                  category.itemList?.filter(item => item.abnormalStatus !== 0)
                    .length || 0
                }}项异常
              </el-tag>
            </div>

            <!-- 指标内容 -->
            <div
              v-for="item in category.itemList"
              :key="item.indexLibraryId"
              class="mb-6 relative"
            >
              <div class="flex items-center my-3">
                <span class="w-1 h-1 bg-blue-400 rounded-2xl mr-4" />
                <span class="font-medium text-sm">{{ item.unitName }}</span>
                <span v-if="item.unit" class="text-gray-500 text-sm ml-1"
                  >（{{ item.unit }}）</span
                >
              </div>

              <el-button
                v-if="item.images && item.images.length > 0"
                link
                type="primary"
                class="mb-3 absolute right-0 text-sm"
                @click="handleViewImage(item)"
              >
                查看影像
              </el-button>

              <div v-if="Number.isNaN(Number(item.value))" class="single-value">
                {{ item.value }}
              </div>
              <v-range-indicator
                v-else
                :normal-range="[+item.unitMin, +item.unitMax]"
                :actual-value="+item.value"
                :min-value="0"
                :max-value="calculateMaxDisplayValue(item.unitMax)"
                :show-value="true"
                :unit="item.unit"
                :abnormal-status="item.abnormalStatus"
              />
              <div v-if="item.abnormalInfo" class="w-full result-info mb-3">
                <div class="font-medium-1"><i /> 异常检查结果：</div>
                <div class="text-gray-500 ml-1">
                  {{ item.abnormalInfo }}
                </div>
              </div>
              <div
                v-if="item.diagnosisResults && item.diagnosisResults.length > 0"
                class="w-full pl-5 text-sm mt-1.5"
              >
                <!-- <div class="font-medium-1 mb-1"><i /> 影像资料-诊断结果：</div> -->
                <li
                  v-for="result in item.diagnosisResults"
                  :key="result"
                  class="text-gray-500 mb-0.5"
                >
                  {{ result }}
                </li>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 完整报告内容 -->
    <div v-else-if="activeTab === 'complete'" class="px-4 pb-5 space-y-4 mt-4">
      <!-- 报告总结 -->
      <div v-if="reportDetail.reportSummary">
        <div class="flex items-center justify-between my-2">
          <div class="flex items-center">
            <div class="w-1 h-5 bg-blue-400 rounded-2xl mr-4" />
            <span class="font-medium">报告总结</span>
          </div>
        </div>

        <div class="relative bg-gray-50 px-6 py-4">
          <div
            class="whitespace-pre-wrap leading-loose transition-all duration-300 ease-in-out overflow-hidden"
            :class="{
              'line-clamp-3': !isReportSummaryExpanded,
              'max-h-none': isReportSummaryExpanded
            }"
          >
            <div v-if="!Array.isArray(reportDetail.reportSummary)">
              {{ reportDetail.reportSummary }}
            </div>
            <div v-for="e in reportDetail.reportSummary" v-else :key="e">
              {{ e }}
            </div>
          </div>

          <!-- 展开收起按钮 -->
          <div class="flex justify-center mt-2">
            <el-button plain size="small" @click="toggleReportSummary">
              <!-- <span>{{ isReportSummaryExpanded ? "收起" : "展开" }}</span> -->
              <svg
                class="w-4 h-4 transition-transform duration-200"
                :class="{ 'rotate-180': isReportSummaryExpanded }"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </el-button>
          </div>
        </div>
      </div>

      <!-- 所有指标 -->
      <div v-if="allItems.length > 0">
        <div class="flex items-center justify-between my-2">
          <div class="flex items-center">
            <div class="w-1 h-5 bg-blue-400 rounded-2xl mr-4" />
            <span class="font-medium">检查指标</span>
          </div>
        </div>

        <!-- 使用 Collapse 展示所有指标 -->
        <div class="bg-gray-50 px-6 py-4">
          <el-collapse>
            <el-collapse-item
              v-for="category in allItems"
              :key="category.categoryId"
              :name="category.categoryId"
            >
              <template #title>
                <div class="flex items-center">
                  <span class="font-medium text-base">{{
                    category.categoryName
                  }}</span>
                  <el-tag size="small" type="info" class="ml-2">
                    {{ category.itemList?.length || 0 }}项
                  </el-tag>
                  <el-tag
                    v-if="
                      category.itemList?.filter(
                        item => item.abnormalStatus !== 0
                      ).length > 0
                    "
                    size="small"
                    type="danger"
                    class="ml-1"
                  >
                    {{
                      category.itemList?.filter(
                        item => item.abnormalStatus !== 0
                      ).length
                    }}项异常
                  </el-tag>
                </div>
              </template>

              <!-- 使用范围条展示每个指标 -->
              <div
                v-for="item in category.itemList"
                :key="item.indexLibraryId"
                class="mb-6 relative"
              >
                <div class="flex items-center my-3">
                  <span class="w-1 h-1 bg-blue-400 rounded-2xl mr-4" />
                  <span class="font-medium text-sm">{{ item.unitName }}</span>
                  <span v-if="item.unit" class="text-gray-500 text-sm ml-1"
                    >（{{ item.unit }}）</span
                  >
                </div>
                <el-button
                  v-if="item.images && item.images.length > 0"
                  link
                  type="primary"
                  class="mb-3 absolute right-0 top-0 text-sm"
                  @click="handleViewImage(item)"
                >
                  查看影像
                </el-button>
                <div
                  v-if="Number.isNaN(Number(item.value))"
                  class="single-value"
                >
                  {{ item.value }}
                </div>
                <v-range-indicator
                  v-else
                  :title="item.unitName"
                  :normal-range="[+item.unitMin, +item.unitMax]"
                  :actual-value="+item.value"
                  :min-value="0"
                  :max-value="calculateMaxDisplayValue(item.unitMax)"
                  :show-value="true"
                  :unit="item.unit"
                  :abnormal-status="item.abnormalStatus"
                />
                <div v-if="item.abnormalInfo" class="w-full result-info mb-3">
                  <div class="font-medium-1"><i /> 异常检查结果：</div>
                  <div class="text-gray-500 ml-1">
                    {{ item.abnormalInfo }}
                  </div>
                </div>
                <div
                  v-if="
                    item.diagnosisResults && item.diagnosisResults.length > 0
                  "
                  class="w-full pl-5 text-sm mt-1.5"
                >
                  <!-- <div class="font-medium-1 mb-1">
                    <i /> 影像资料-诊断结果：
                  </div> -->
                  <li
                    v-for="result in item.diagnosisResults"
                    :key="result"
                    class="text-gray-500 mb-0.5"
                  >
                    {{ result }}
                  </li>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>

    <!-- 审核按钮组 - 固定在页面底部 -->
    <div
      v-if="showReviewButtons"
      class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 z-20"
    >
      <div class="flex justify-center space-x-4">
        <el-button
          type="danger"
          :loading="rejectLoading"
          plain
          @click="handleReview(1)"
        >
          驳回
        </el-button>
        <el-button
          type="primary"
          :loading="reviewLoading"
          @click="handleReview(2)"
        >
          通过审核
        </el-button>
      </div>
    </div>
    <RiskAssessment
      v-model="showRiskDrawer"
      :report-id="reportDetail.reportId"
      :report-type="1"
      @submit-success="handleRiskAssessmentSubmit"
    />

    <!-- 健康标签组件 -->
    <HealthLabel
      v-model="showHealthDrawer"
      :report-id="reportDetail.reportId"
      :report-type="1"
      title="健康标签"
      @submit-success="handleHealthSubmit"
    />
    <Jiankang ref="addJKDrawerRef" title="健康建议" @save="onJKSave" />

    <el-dialog
      v-model="dialogVisible"
      :draggable="true"
      :modal="false"
      :modal-penetrable="true"
      append-to-body
      width="500"
      :close-on-click-modal="false"
      modal-class="c-draggable"
      @close="handleDialogClose"
    >
      <div class="select-none">
        <el-tabs v-model="dialogVisibleActiveTab" class="bg-white px-4">
          <el-tab-pane label="风险评估" name="report">
            <el-input
              v-model="tabsFrom.riskAssessmentRejectReason"
              style="width: 100%"
              :rows="2"
              type="textarea"
              placeholder="请输入理由"
            />
          </el-tab-pane>
          <el-tab-pane label="医生健康建议" name="complete">
            <el-input
              v-model="tabsFrom.healthSuggestionRejectReason"
              style="width: 100%"
              :rows="2"
              type="textarea"
              placeholder="请输入理由"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleSuggestionSubmit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="imagingModalVisible"
      destroy-on-close
      top="30px"
      title="影像资料"
    >
      <imgs :current-images="currentImages" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .el-collapse-item__wrap,
::v-deep .el-collapse-item__header {
  background: transparent;
}

/* 三行显示样式 */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-info {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  font-size: 12px;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 16px;
  .font-medium-1 {
    color: #fe3e3e;
    display: flex;
    align-items: center;
    font-size: 12px;
    flex-direction: row;
    i {
      display: block;
      width: 8px;
      height: 8px;
      background: #fe3e3e;
      border-radius: 20%;
      margin-right: 4px;
      margin-bottom: 4px;
    }
  }
}
.single-value {
  margin-left: 20px;
  font-weight: 600;
}
</style>

<style lang="scss">
.c-draggable {
  .el-dialog.is-draggable {
    padding-top: 0;
  }
}
</style>
